<template>
  <div class="app-container">
    <h2 >关联秒杀商品</h2>
   
    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="promotionSessionId" placeholder="场次id"/>
        </el-form-item>
 
        <el-button type="primary" icon="el-icon-search" @click="getListCondition()">查询</el-button>
        <el-button type="default" @click="openGoodsDialog()" >新增</el-button>
        <el-button type="default" @click="resetData()">批量删除</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        
        <el-table-column label="id" width="200" align="center">
            <template slot-scope="scope">
            <!-- {{ (page - 1) * limit + scope.$index + 1 }} -->
                {{scope.row.id}}
            </template>
        </el-table-column>

        <el-table-column prop="promotionSessionId" label="场次id" width="80" />

        <el-table-column prop="skuId" label="商品id" />

        <el-table-column prop="seckillPrice" label="秒杀价格" />

        <el-table-column prop="seckillCount" label="秒杀总量"/>

        <el-table-column prop="seckillLimit" label="每人限购数量"/>

        <el-table-column prop="seckillSort" label="排序"/>
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit"
                    @click="openGoodsDialogModify(scope.row)">修改</el-button>
                
                <el-button type="danger" size="mini" icon="el-icon-delete" 
                    @click="deleteGoods(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
       <!-- 分页 -->
    <el-pagination :current-page="page" :page-size="limit" :total="total"
    style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper"
    @current-change="getList"/>

    <!-- 添加和修改场次表单 -->
    <el-dialog :visible.sync=" dialogGoodsFormVisible" title="新增商品">
      <el-form :model="goodsSave" label-width="120px">
        <el-form-item label="活动场次id">
          <el-input v-model="goodsSave.promotionSessionId" />
        </el-form-item>
        <el-form-item label="商品id">
          <el-input v-model="goodsSave.skuId" />
        </el-form-item>
        <el-form-item label="秒杀价格">
          <el-input-number  v-model="goodsSave.seckillPrice" :min="0" 
            controls-position="right"/>
        </el-form-item>
        <el-form-item label="秒杀总量">
            <el-input-number  v-model="goodsSave.seckillCount" :min="0" 
            controls-position="right"/>
        </el-form-item>
        <el-form-item label="每人限购数量">
            <el-input-number  v-model="goodsSave.seckillLimit" :min="0" 
            controls-position="right"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="goodsSave.seckillSort" />
        </el-form-item>
       
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" dialogGoodsFormVisible = false">取 消</el-button>
       
        <el-button type="primary" @click="saveOrUpdateGoods">确 定</el-button>
       
      </div>
    </el-dialog>
  </div>
</template>
<script>
import secondKill from '@/api/edu/secondKill'
export default {
    data() {
        return {
            list:null,  //查询之后接口返回的结果
            page:1,       //当前页
            limit:5,      //每页记录数
            total:0,        //总记录数
            promotionSessionId:'1',     //条件封装对象
            dialogGoodsFormVisible:false, //新增商品详情页显示
            goodsSave:{    //新增商品
                id:'',
                promotionSessionId:'',
                skuId:'',
                seckillPrice:0,
                seckillCount:0,
                seckillLimit:0,
                seckillSort:0,
                save:true

            },
        }
    },
    created() {
        this.getList()
    },
    methods:{
        //关联商品列表
        getList(page=1){
            this.page = page
            secondKill.goodsGetList(this.page,this.limit,this.promotionSessionId)
                .then(response=>{
                    this.list=response.data.records
                    this.total=response.data.total
                    
                })
                .catch(err=>{
                    console.log(err)
                })
        }, 
        //根据场次条件分页查询
        getListCondition(page=1){
           this.page = page
            secondKill.getListCondition(this.page,this.limit,this.promotionSessionId)
                .then(response=>{
                    this.list=response.data.records
                    this.total=response.data.total
                })
                .catch(err=>{
                    console.log(err)
                })   
        }, 
        //新建关联商品的弹窗
        openGoodsDialog(){
            this.dialogGoodsFormVisible=true
            this.goodsSave.save=true
            this.goodsSave={
                id:'',
                promotionSessionId:'',
                skuId:'',
                seckillPrice:0,
                seckillCount:0,
                seckillLimit:0,
                seckillSort:0,
                save:true
            }
        },
        //修改关联商品的弹窗
        openGoodsDialogModify(good){
            this.dialogGoodsFormVisible=true
            this.goodsSave.save=false
            this.goodsSave.promotionSessionId=good.promotionSessionId
            this.goodsSave.skuId=good.skuId
            this.goodsSave.seckillPrice=good.seckillPrice
            this.goodsSave.seckillCount=good.seckillCount
            this.goodsSave.seckillLimit=good.seckillLimit
            this.goodsSave.seckillSort=good.seckillSort
            this.goodsSave.id=good.id
           
        },
        //保存新建关联商品
        saveGoods(){
            secondKill.saveGoods(this.goodsSave)
                .then(response=>{
                    //添加成功提示信息
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.dialogGoodsFormVisible=false
                    this.promotionSessionId=this.goodsSave.promotionSessionId
                    this.getList()
                    //跳转场次列表页面
                    this.$router.push({ path: '/secondkill/relative' })
                })
                .catch(err=>{
                    console.log(err)
                })   
        },
        //更新关联商品
        updateGoods(){
           secondKill.updateGoods(this.goodsSave)
                .then(response=>{
                    //添加成功提示信息
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogGoodsFormVisible=false
                    this.promotionSessionId=this.goodsSave.promotionSessionId
                    this.getList()
                    //跳转场次列表页面
                    this.$router.push({ path: '/secondkill/relative' })
                })
                .catch(err=>{
                    console.log(err)
                })   
        },
        //保存或修改关联商品信息
        saveOrUpdateGoods(){
            if(this.goodsSave.save){
                console.log("save")
                this.saveGoods()
            }else{
               
                this.updateGoods()
            }
           
        },
        //删除关联商品
        deleteGoods(id){
            this.$confirm('此操作将永久删除该关联商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用删除方法
                secondKill.deleteGoodById(id)
                    .then(response=>{
                        //删除成功提示信息
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        //回到列表页面
                        this.getList()
                    })
                    
            })
        },
    }
}
</script>
